//引入样式
require('../css/commonCss/normalize.css')
require('../css/commonCss/reset.css')
require('../css/commonCss/property.css')
require('../css/commonCss/basic.less')
require('../fonts/iconfont.css')

require('../css/mySportData.less')
//引入axios
const axios = require('axios')
//weui—插件库
require('weui')
const weui = require('weui.js')

// 引入图表
const echarts = require('echarts')

// 文档加载事件
document.addEventListener('DOMContentLoaded', function () {
    // 获取元素
    const returnTop = document.querySelector('#returnTop')//返回上一级

    // 点击向左字标返回上一级
    returnTop.addEventListener('click', function () {
        history.go(-1);
    })

    // 请求参数
    /* axios.get('http://139.9.177.51:8099//users/mysportsBadge',{
        params: {
            userId: localStorage.getItem('userId')
        }
        }).then(function(res){
            console.log(res.data.data.sports);
        }) */
    //七天运动时长 树状图
    drawWeekTime()
    function drawWeekTime() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.querySelector('#main1'));
        // 绘制图表 指定图表的配置项和数据
        myChart.setOption({
            title: {
                text: '近七天运动时长',
                textStyle: {
                    fontSize: 13,
                    fontWeight: 'bold',
                },
            },
            tooltip: {},
            xAxis: {
                data:['2/16', '2/17', '2/18', '2/19', '2/20', '2/21', '2/22'],
            },
            yAxis: {},
            series: [
                {
                    name: '时长占比',
                    type: 'bar',
                    data:[20, 25, 40, 75, 100, 65, 50],
                    color: '#83a7d1'
                }
            ]
        });
    }

    //运动分类 饼状图
    pieChartKinds()
    function pieChartKinds() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.querySelector('#main2'));
        // 绘制图表 指定图表的配置项和数据
        myChart.setOption({
            //标题
            title: {
              text: '运动分类',
              textStyle: {
                  fontSize: 13,
                  fontWeight: 'bold',
              },
            },
            //提示
            tooltip: {
              trigger: 'item'
            },
            //图例
            legend: {
              orient: 'vertical',
              left: 'left',
              top:'middle',
              itemWidth:10,
              itemHeight:10,
              borderRadius:0,
              icon:'rect'
            },
            //核心数据
            series:[
              {
                label:{                
                    position:'inside',
                    formatter:'{d}%',
                    color:'#fff'
,                },
                name: '具体信息',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: 70, name: '骑行' ,itemStyle:{color:'#ee5c43'}},
                  { value: 50, name: '跑步' ,itemStyle:{color:'#736271'}},
                  { value: 80, name: '训练',itemStyle:{color:'#58bb92'}}
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          });
    }


    //近七日运动分类 堆叠条形图
    motionClassification()
    function motionClassification() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.querySelector('#main3'));
        // 绘制图表 指定图表的配置项和数据
        myChart.setOption({
            //标题
            title: {
                text: '近七日运动分类',
                textStyle: {
                    fontSize: 13,
                    fontWeight: 'bold',
                },
              },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
              }
            },
            legend: {
              orient: 'vertical',
              left: 'right',
              top:'middle',
              itemWidth:10,
              itemHeight:10,
              borderRadius:0,
              icon:'rect',
              align:'left',
            },
            //直角坐标系 网格位置
            grid: {
              left: '3%',
              right: '18%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value'
            },
            yAxis: {
              type: 'category',
              data: ['2/16', '2/17', '2/18', '2/19', '2/20', '2/21', '2/22']
            },
            series: [
              {
                name: '跑步',
                type: 'bar',
                stack: 'total',
                label: {
                //   show: true
                },
                emphasis: {
                  focus: 'series'
                },
                data: [30, 22, 31, 14, 19, 23, 20],
                // itemStyle:{color:'#83a7d1'}
              },
              {
                name: '骑行',
                type: 'bar',
                stack: 'total',
                label: {
                //   show: true
                },
                emphasis: {
                  focus: 'series'
                },
                data: [20, 32, 28, 24, 30, 10, 10],
                itemStyle:{color:'skyblue'}
              },
              {
                name: '训练',
                type: 'bar',
                stack: 'total',
                label: {
                //   show: true
                },
                emphasis: {
                  focus: 'series'
                },
                data: [20, 12, 31, 34, 20, 30, 25],
                itemStyle:{color:'yellowgreen'}
              }
            ]
          });
    }


    //近七日训练次数 折线图
    trainingTimes()
    function trainingTimes() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.querySelector('#main4'));
        // 绘制图表 指定图表的配置项和数据
        myChart.setOption({
            //标题
            title: {
              text: '近七日训练次数',
              textStyle: {
                  fontSize: 13,
                  fontWeight: 'bold',
              },
            },
            xAxis: {
              type: 'category',
              data: ['2/16', '2/17', '2/18', '2/19', '2/20', '2/21', '2/22']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [2, 4, 4, 8, 2, 4, 6,10],
                type: 'line',
                itemStyle:{color:'skyblue'},
                label: {
                    show: true,
                },
              }
            ]
          });
    }

})